<template>
  <div>
    <!-- {{singerList[0]}} -->
    <div class="userbox">
      <div class="btnBox">
        <el-button type="primary" @click="addSinger">添加歌手</el-button>
      </div>
      <div class="searchbox">
        <el-input v-model="input" placeholder="请输入内容"></el-input>
        <span class="iconfont icon-sousuo" @click="searchs"></span>
      </div>
      <el-table
        class="listBox"
        :data="
          searchFlog
            ? searchList.slice(
                (currentPage - 1) * pagesize,
                currentPage * pagesize
              )
            : singerList.slice(
                (currentPage - 1) * pagesize,
                currentPage * pagesize
              )
        "
        border
        style="width: 100%"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
      >
        <el-table-column prop="id" label="id" width="50"> </el-table-column>
        <el-table-column prop="name" label="歌手图片" width="100">
          <template slot-scope="scope">
            <!-- {{scope.row}} -->
            <img :src="scope.row.singerUrl" alt="" />
          </template>
        </el-table-column>
        <el-table-column prop="singerCode" label="歌手编号" width="100">
        </el-table-column>
        <el-table-column prop="singerName" label="歌手名"> </el-table-column>
        <el-table-column prop="stageName" label="艺名"> </el-table-column>
        <el-table-column prop="sex" label="性别">
          <template slot-scope="scope">
            <!-- {{ scope.row.sex == 0 ? "女" : "男" }} -->
            <p v-if="scope.row.sex == 0">保密</p>
            <p v-if="scope.row.sex == 1">男</p>
            <p v-if="scope.row.sex == 2">女</p>
          </template>
        </el-table-column>
        <el-table-column prop="birthday" label="歌手生日" width="100">
          <template slot-scope="scope">
            {{ scope.row.birthday }}
          </template>
        </el-table-column>
        <el-table-column prop="singerIntroduction" label="简介" width="90">
          <template slot-scope="scope">
            <div class="introText">
              {{ scope.row.singerIntroduction }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="university" label="大学"> </el-table-column>
        <el-table-column prop="nationality" label="国籍"> </el-table-column>
        <el-table-column prop="address" label="地区"> </el-table-column>

        <el-table-column prop="university" label="专辑" width="110">
          <template slot-scope="scope">
            <el-button type="success" size="mini" @click="ViewAlbum(scope.row)"
              >查看专辑</el-button
            >
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250">
          <template slot-scope="scope">
            <div class="btnsBox">
              <el-button type="success" size="mini" @click="examine(scope.row)"
                >查看</el-button
              >
              <el-button type="primary" size="mini" @click="alter(scope.row)"
                >修改</el-button
              >
              <el-button type="danger" size="mini" @click="clears(scope.row)"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 7]"
        :page-size="pagesize"
        layout="total,sizes,  prev, pager, next, jumper"
        :total="totalCount"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 总数据
      singerList: [],
      // 搜索结果
      searchList: [],
      // 是否显示搜索值
      searchFlog: false,
      //当前页数
      currentPage: 1,
      // 每页显示条数
      pagesize: 5,
      // 总条数
      totalCount: 0,
      //   输入框
      input: "",
      Url: "http://192.168.0.26:8081",
    };
  },
  mounted() {
    // 获取歌手总数据
    var allListArr = JSON.parse(sessionStorage.getItem("allList"));
    if (allListArr != undefined) {
      this.singerList = [];
      for (let i = 0; i < allListArr.length; i++) {
        // console.log(allListArr[i].birthday);
        if (allListArr[i].birthday != null) {
          allListArr[i].birthday = allListArr[i].birthday.split(" ")[0];
        }
        this.singerList.push(allListArr[i]);
      }
      this.totalCount = this.singerList.length;
    } else {
      this.getAllList();
    }
    // console.dir(this.singerList[0]);
    let breaks = this.$route.params.breaks;
    // console.dir(breaks);
    if (breaks == "true") {
      console.dir(1);
      this.getAllList();
    }
  },
  methods: {
    // 获取所有数据
    getAllList() {
      this.$axios.get("/api/singer/getAllSinger").then((res) => {
        var arr = res.data.data;
        for (let i = 0; i < arr.length; i++) {
          if (arr[i].singerUrl != null && arr[i].singerUrl != "") {
            arr[i].singerUrl = this.Url + arr[i].singerUrl;
          }
        }
        this.singerList = [];
        for (let i = 0; i < arr.length; i++) {
          this.singerList.push(arr[i]);
        }
        this.totalCount = this.singerList.length;
        sessionStorage.setItem("allList", JSON.stringify(this.singerList));
      });
      // console.dir(this.singerList);
    },
    btn() {},
    // 每页显示几条
    handleSizeChange(val) {
      this.pagesize = val;
      //   this.getPackData(); //根据用户获取的每页显示页面数量显示页面
    },
    // 操作当前页
    handleCurrentChange(val) {
      this.currentPage = val;
      // this.getPackData();//获取用户点击的当前页后刷新页面数据
    },
    // 添加歌手
    addSinger() {
      this.$router.push("/addForm");
    },
    // 修改
    alter(val) {
      this.processData(val);
      this.$router.push({ path: "addForm", query: { alter: true } });
    },
    // 查看
    examine(val) {
      this.processData(val);
      this.$router.push("/examine");
    },
    // 删除
    clears(val) {
      // console.dir(val.id);
      this.$confirm("此操作将删除该信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .post(`api/singer/deleteSingerById?id=${val.id}`)
            .then((res) => {
              // console.dir(res.data.msg);
              if (res.data.msg == "操作成功") {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                var list = this.singerList;
                var idx = 0;
                for (let i = 0; i < list.length; i++) {
                  if (list[i].id == val.id) {
                    // console.dir(list[0]);
                    idx = i;
                  }
                }
                list.splice(idx, 1);
                sessionStorage.setItem(
                  "allList",
                  JSON.stringify(this.singerList)
                );
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 处理数据
    processData(val) {
      var FormData = {};
      var sex = "";
      switch (val.sex) {
        case 0:
          sex = "保密";
          break;
        case 1:
          sex = "男";
          break;
        case 2:
          sex = "女";
          break;
      }
      FormData.singerName = val.singerName;
      FormData.stageName = val.stageName;
      FormData.singerUrl = val.singerUrl;
      FormData.sex1 = sex;
      FormData.sex = val.sex;
      FormData.birthday1 = val.birthday;
      FormData.birthday = val.birthday;
      FormData.university = val.university;
      FormData.nationality = val.nationality;
      FormData.address = val.address;
      FormData.singerIntroduction = val.singerIntroduction;
      FormData.id = val.id;
      sessionStorage.setItem("FormData", JSON.stringify(FormData));
    },
    // 搜索
    searchs() {
      this.$axios
        .get(`api/singer/getSinger?singerName=${this.input}`)
        .then((res) => {
          // console.dir(res.data.data);
          this.searchList = res.data.data;
          this.searchFlog = true;
          this.totalCount = this.searchList.length;
        });
    },
    // 查看专辑
    ViewAlbum(val) {
      // console.dir(val.id);
      sessionStorage.setItem("singerId", val.id);
      this.$router.push({
        path: "/albumList",
        query: { names: val.singerName },
      });
    },
  },
};
</script>
<style scoped>
.btnBox {
  text-align: left;
}
.imgs {
  width: 70px;
  height: 70px;
  line-height: 70px;
  text-align: center;
}
img {
  display: inline-block;
  width: 70px;
  height: auto;
  max-height: 70px;
}
.listBox {
  max-height: 600px;
}
.userbox {
  margin: 20px 20px;
  border-radius: 5px;
  padding: 10px 20px;
  box-sizing: border-box;
  background: white;
}
.searchbox {
  margin: 20px 20px 20px 0;
  display: flex;
  align-content: space-around;
  width: 300px;
}
span {
  display: block;
  background: skyblue;
  height: 40px;
  width: 40px;
  line-height: 40px;
  margin-left: 20px;
  font-size: 20px;
  color: white;
  border-radius: 5px;
}
.btnsBox {
  text-align: center;
}
.introText {
  width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>